import TopNavict from "../compoments/TopNavict"
import cart from "./styles/cart.module.css"
import BottomBavict from "../compoments/bottomnav"
import classNames from "classnames"
import Count from "../compoments/count"
import { useState } from "react"
import { useEffect } from "react"
import { Link } from "react-router-dom"

const img = require("../static/购物车.png")

const table_head = ["商品名称","属性","价格","数量","小计","操作"]


const cart_lis = [
    [
        "荔来香",
        "蛋糕",
        "¥282.00",
        1,
        "¥282.00",
        "https://jimucake.com/pic/thumb/img/upload@_@2022@_@05@_@13@_@20220513170229191.jpg/w/186/h/186",
        229
    ],
    [
        "荔来香",
        "蛋糕",
        "¥282.00",
        1,
        "¥282.00",
        "https://jimucake.com/pic/thumb/img/upload@_@2022@_@05@_@13@_@20220513170229191.jpg/w/186/h/186",
        229
    ],
    [
        "荔来香",
        "蛋糕",
        "¥282.00",
        1,
        "¥282.00",
        "https://jimucake.com/pic/thumb/img/upload@_@2022@_@05@_@13@_@20220513170229191.jpg/w/186/h/186",
        229
    ],
    [
        "荔来香",
        "蛋糕",
        "¥282.00",
        1,
        "¥282.00",
        "https://jimucake.com/pic/thumb/img/upload@_@2022@_@05@_@13@_@20220513170229191.jpg/w/186/h/186",
        229
    ]
]


const Cart = () => {
    const [cart_list,setCart] = useState([...cart_lis])
    const [total_p,setTotal] = useState(0)
    useEffect(() => {
        let total = 0
        cart_list.forEach(item => {
            total += item[6] + 53
        })
        setTotal(total)
    },[])
    const Revice = (data) =>{
        const index_ = data.index
        cart_list[index_][3] = data.count
        const total = data.count * cart_list[index_][6] + 53
        cart_list[index_][4] = "¥" + total.toString()
        const total_t = total_p+cart_list[index_][6]
        setTotal(total_t)
        setCart([...cart_list])
    }
    const deleteItem = (index) =>{
        const pri = cart_list[index]
        cart_list.splice(index,1)
        const curr_total = total_p - Number(pri[4].split("¥")[1])
        setTotal(curr_total)
        setCart([...cart_list])
    }
        
        
    return (
        <div className={cart.app}>
            <TopNavict />
            <div className={cart.line}>
            </div>
            <div className={cart.option}>
                <div  className={cart.title}>
                    <div className={cart.cart_img}>
                        <img src={img} alt="" />
                    </div>
                    <div className={cart.txt}>我的购物车</div>
                </div>
                <div className={cart.table}>
                    <div className={cart.tab_head}>
                        {
                            table_head.map((item,index) => (
                                <div key={index} className={classNames(index === 0 ? cart.table_name : index === 3 ? cart.table_count : cart.table_item)}>
                                    <div className={cart.tab_txt}>{item}</div>
                                </div>
                            ))
                        }
                    </div>
                    <div>
                        {
                            cart_list.map((item,index) => (
                                <div key={index} className={cart.tab_body}>
                                    {
                                        table_head.map((item1,index1) => (
                                            <div key={index1} className={classNames(index1 === 0 ? cart.table_n : index1 === 3 ? cart.table_c : cart.table_i)}>
                                                {
                                                    index1 !== 5 ? index1 === 0 ? 
                                                    <div className={cart.table_img_}>
                                                        <div>
                                                            <img className={cart.tab_img} src={item[5]} alt="" />
                                                        </div>
                                                        <div className={cart.table_txt_}>
                                                            {item[index1]}
                                                        </div>
                                                    </div> : index1 === 3 ? 
                                                    <div>
                                                        <Count count={item[index1]}  Revice={Revice} index={index} />
                                                    </div> : item[index1] :
                                                    
                                                    <div className={cart.opion_} onClick={() => {deleteItem(index) }}>删除</div>  
                                                }
                                            </div>
                                        ))
                                    }
                                </div>
                            ))
                        }
                    </div>
                </div>
                <div className={cart.end}>
                    <div className={cart.end_title}>
                        总计:¥{total_p}元
                    </div>
                    <div className={cart.btn}>
                        <Link to="/" className={cart.btn_}><div >继续购物</div></Link>
                        <div className={cart.btn_}>
                            立即结算
                        </div>
                    </div>
                </div>
            </div>
            <BottomBavict />
        </div>
    )
}

export default Cart